<template>
  <div id="order">
    <h1 class="titleTag">订单管理</h1>
    <div class="navToggle">
      <button v-if="$store.state.USER==1" :class="navShow==1?'active':''" @click="offerYes">已报价</button>
      <button v-if="$store.state.USER==1" :class="navShow==2?'active':''" @click="offerNo">未报价</button>
      <button v-if="$store.state.USER==2" :class="navShow==1?'active':''" @click="offerYes">承运订单</button>
      <button v-if="$store.state.USER==2" :class="navShow==2?'active':''" @click="offerNo">询价订单</button>
      <button v-if="$store.state.USER==2" :class="navShow==3?'active':''" @click="myorder">我的</button>
    </div>
    <el-form :inline="true" :model="ruleForm" ref="ruleForm" class="mt24">
      <el-form-item>
        <el-input v-model="ruleForm.number" placeholder="货运单号" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 144px;" v-model="ruleForm.value" placeholder="发货类型" size="small">
          <el-option width="100" v-for="item in ruleForm.options" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 144px;" v-model="ruleForm.value2" placeholder="订单状态" size="small">
          <el-option width="100" v-for="item in ruleForm.options2" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="ruleForm.time2" default-time="12:00:00"
            style="width: 100%;" size="small"></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="query('2',navShow)">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetForm('ruleForm')">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table :data="tableData" height="500" border style="width: 100%;">
        <el-table-column header-align="center" label="基本信息" min-width="250">
          <template slot-scope="data">
            <div class="fb"><span>状态</span><span class="CYAN">{{ data.row.state | statusNum }}</span></div>
            <div class="fb"><span>货源单号</span><span class="BLUE">{{ data.row.orderNumber }}</span></div>
            <div class="fb"><span>发货联系人</span><span>{{ data.row.consignor }}</span></div>
            <div class="fb"><span>发货联系电话</span><span>{{ data.row.conPhone }}</span></div>
            <div class="fb"><span>收货联系人</span><span>{{ data.row.receiving }}</span></div>
            <div class="fb"><span>收货联系电话</span><span>{{ data.row.rePhone }}</span></div>
            <div class="fb"><span>发货类型</span><span class="CYAN">{{ data.row.deliveryMode }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="行程" min-width="280">
          <template slot-scope="data">
            <div class="fb">
              <span>起始城市</span><span>{{ `${data.row.conProvinces}-${data.row.conCity}-${data.row.conArea}` }}</span>
            </div>
            <div class="fb">
              <span>目的地城市</span><span>{{ `${data.row.provinces}-${data.row.reCity}-${data.row.reArea}` }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="运费" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>运费单价</span><span>{{ data.row.freight }}</span></div>
            <div class="fb"><span>预估总价</span><span>{{ data.row.totalPrice }}</span></div>
            <div class="fb"><span>付款方式</span><span>{{ data.row.payment }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="货物信息" min-width="186">
          <template slot-scope="data">
            <div class="fb"><span>货物名称</span><span>{{ data.row.name }}</span></div>
            <div class="fb"><span>订单量</span><span>{{ data.row.quantity }}</span></div>
            <div class="fb"><span>货物单位</span><span>{{ data.row.unitload }}</span></div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="时间" min-width="260">
          <template slot-scope="data">
            <div class="fb"><span>客户下单时间</span><span>{{ data.row.createTime }}</span></div>
            <div class="fb"><span>要求发货时间</span><span>{{ data.row.pickupTime }}</span></div>
            <div class="fb"><span>要求到货时间</span><span>{{ data.row.deliveryTime }}</span></div>
            <div class="fb"><span>要求回单时间</span><span>{{ data.row.number19 }}</span></div>
            <!-- <div class="fb"><span>订单生成时间</span><span>{{ data.row.createTime }}</span></div> -->
          </template>
        </el-table-column>
        <el-table-column header-align="center" label="其他" min-width="190">
          <template slot-scope="data">
            <div class="fb"><span>需求车型</span><span>{{ data.row.carMode }}</span></div>
            <div class="fb"><span>需求车长</span><span>{{ data.row.length }}</span></div>
            <div class="fb"><span>车辆载重</span><span>{{ data.row.loads }}</span></div>
            <div class="fb"><span>允许损耗</span><span>{{ data.row.factor }}</span></div>
            <div class="fb"><span>备注</span><span>{{ data.row.remarks }}</span></div>
          </template>
        </el-table-column>
        <!-- 托运人人 -->
        <el-table-column v-if="$store.state.USER==1" header-align="center" align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.adjustPrice">
              <el-button type="text" size="small" @click="inquiry(scope.row.orderNumber,scope.row.adjustPrice)">询价单</el-button>
            </div>
          </template>
        </el-table-column>
        <!-- 承运人 -->
        <el-table-column v-if="$store.state.USER==2" header-align="center" align="center" label="操作" min-width="100">
          <template slot-scope="scope">
            <div v-if="navShow==1">
              <el-button type="text" size="small" @click="accept(scope.row.orderNumber)">受理</el-button>
            </div>
            <div v-if="navShow==2">
              <el-button @click="oferAlert(scope.row.unitload,scope.row.orderNumber)" type="text" size="small">报价
              </el-button>
            </div>
            <div v-if="navShow==3">
              <el-button type="text" size="small">派车</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 承运商报价 -->
    <el-dialog class="dialog" title="报价" :visible.sync="centerDialogVisible" width="" center>
      <el-form :inline="true" :model="offerData" :rules="rules" style="text-align: center;" class="mt24"
        label-width="80px">
        <el-form-item label="报价" prop="makeOffer">
          <el-input style="width:300px" v-model="offerData.makeOffer" placeholder="请输入报价" size="small"> <template
              slot="append">元/{{unitload}}</template></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="name">
          <el-input style="width:300px" v-model="offerData.name" placeholder="请输入联系人" size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input style="width:300px" v-model="offerData.phone" placeholder="请输入手机号" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input style="width: 300px" type="textarea" :rows="3" placeholder="请输入备注" v-model="offerData.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="oferSubmit">确认</el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <!-- 承运人派单 -->
    <div v-if="$store.state.USER==1" class="addressRadio">
      <el-dialog title="派单" :model="dispatchForm" :visible.sync="dispatchDialog" center>
        <el-form label-position="left" label-width="70px">
          <el-row :gutter="30">
            <el-col :span="8">
              <el-form-item label=" 司机" prop="name">
                <el-select v-model="dispatchForm.name" placeholder="" size='small'>
                  <el-option v-for="(item,index) in dispatchForm.options1" :label="item.label" :value="item.value"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号" prop="cnumber">
                <el-select v-model="dispatchForm.cnumber" placeholder="" size='small'>
                  <el-option v-for="(item,index) in dispatchForm.options2" :label="item.label" :value="item.value"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="挂车号" prop="gnumber">
                <el-select v-model="dispatchForm.gnumber" placeholder="" size='small'>
                  <el-option v-for="(item,index) in dispatchForm.options3" :label="item.label" :value="item.value"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分配数量" prop="number">
                <el-input v-model="dispatchForm.number" placeholder="" size="small">
                  <template slot="append">吨</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输单价" prop="price">
                <el-input v-model="dispatchForm.price" placeholder="" size="small">
                  <el-select v-model="dispatchForm.unit" slot="append" placeholder="" size='small'>
                    <el-option label="元/吨" value="元/吨"></el-option>
                    <el-option label="方" value="方"></el-option>
                    <el-option label="件" value="件"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预估总价" prop="tottalPrice">
                <el-input v-model="dispatchForm.tottalPrice" placeholder="" size="small">
                  <template slot="append">元</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否预付" prop="tottalPrice">
                <el-radio v-model="dispatchForm.radio" label="1">是</el-radio>
                <el-radio v-model="dispatchForm.radio" label="2">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button size="small" @click="addTo"> <i class="el-icon-plus"></i> 添加司机</el-button>
              <el-form-item>
                <el-button size="small" @click="resetForm('ruleForm')">清空</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <el-table ref="multipleTable" highlight-current-row height="420" :data="dispatchData">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio @change.native="getTemplateRow(scope.$index,scope.row)" v-model="radioIndex"
                :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="联系人" width="150">
            <template slot-scope="data">
              <div>{{data.row.name}}</div>
              <div>{{data.row.phone}}</div>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="data">
              <div>{{ data.row.province + data.row.city +data.row.area }}</div>
              <div>{{data.row.address}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="reviseSure(scope.row)" type="text" size="small"><img class="iconimg"
                  :src="require('@/assets/img/iconfont/edit.png')" alt=""></el-button>
              <el-button @click="deleteSure(scope.$index, gridData)" type="text" size="small"><img class="iconimg"
                  :src="require('@/assets/img/iconfont/delete.png')" alt=""></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-pagination background layout="prev, pager, next" :total="50" :size="10">
          </el-pagination>
          <div class="submitBUTTON mt24"><button @click="dispatchDialog=false">确定选择</button></div>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {
  apiSearchOrder,
  apiAccept,
  apiOffer,
  apiSearchOffer,
  apiSurePrice
} from "@/utils/api";
export default {
  name: "order",
  filters: {
    statusNum(value) {
      const status = ["待受理","调价中", "执行中", "运输中", "已完成", "已拒绝", "已受理"];
      return status[value];
    }
  },
  data() {
    return {
      navShow: "1",
      dialogVisible: false,
      centerDialogVisible: false,
      dispatchDialog: true,
      unitload: "",
      orderNumber: "1",
      ruleForm: {
        number: "",
        value: "",
        value2: "",
        options: [
          {
            value: "大宗",
            label: "大宗"
          },
          {
            value: "整车",
            label: "整车"
          }
        ],
        options2: [
          {
            value: "待报价",
            label: "待报价"
          },
          {
            value: "报价中",
            label: "报价中"
          },
          {
            value: "执行中",
            label: "执行中"
          },
          {
            value: "运输中",
            label: "运输中"
          },
          {
            value: "已完成",
            label: "已完成"
          }
        ],
        time: "",
        time2: ""
      },
      tableData: [],
      // 报价
      offerData: {
        status: "已报价",
        carrierName: localStorage.getItem("name"),
        makeOffer: "",
        name: "",
        phone: "",
        remarks: ""
      },
      //派单
      dispatchForm: {
        name: "",
        cnumber: "",
        gnumber: "",
        number: "",
        price: "",
        unit: "",
        radio: "1",
        tottalPrice: "",
        options1: [
          {
            value: "张司机",
            label: "张司机"
          },
          {
            value: "王司机",
            label: "王司机"
          }
        ],
        options2: [
          {
            value: "豫M001",
            label: "豫M001"
          },
          {
            value: "豫M002",
            label: "豫M002"
          }
        ],
        options3: [
          {
            value: "张司机",
            label: "张司机"
          },
          {
            value: "王司机",
            label: "王司机"
          }
        ]
      },
      dispatchData: [
        {
          id: "1",
          name: "王小虎",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        },
        {
          id: "2",
          name: "王2",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        },
        {
          id: "3",
          name: "王3",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        }
      ],
      radioIndex: "",
      rules: {
        makeOffer: [{ required: true, message: "请输入报价", trigger: "blur" }],
        name: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }]
      }
    };
  },
  created() {},
  mounted() {
    // console.log({...this.offerData,...{orderNumber:this.orderNumber}});
    this.query("1", this.navShow);
  },
  methods: {
    // status订单状态(1：已报价，2：未报价，3：我的)
    //查询订单
    query(type, status) {
      apiSearchOrder({
        status: status,
        orderNumber: type == 1 ? "" : this.ruleForm.number,
        state: "",
        pageNumber: 1,
        pageSize: 10
      })
        .then(res => {
          // console.log(res);
          this.tableData = res.data.records;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 已报价
    offerYes() {
      this.navShow = "1";
      this.query("1", this.navShow);
    },
    // 未报价
    offerNo() {
      this.navShow = "2";
      this.query("1", this.navShow);
    },
    // 托运人确认调价单
    inquiry(id,price) {
      this.$confirm(`当前运费价格：<span style="color:red">${price}</span> 元`, "报价单", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "同意",
        cancelButtonText: "不同意"
      })
        .then(() => {
          apiSurePrice({
            type: 1,
            orderNumber: id,
            realPrice: price
          })
            .then(res => {
              this.$message({ message: "已同意", type: "success" });
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          apiSurePrice({
            type: 0,
            orderNumber: id,
            realPrice: price
          })
            .then(res => {
              this.$message({ message: "已拒绝", type: "success" });
            })
            .catch(error => {
              console.log(error);
            });
        });
    },
    // 承运人 我的
    myorder() {
      this.navShow = "3";
      this.query("1", this.navShow);
    },
    // 承运人 受理
    accept(number) {
      this.$confirm("确认受理？")
        .then(() => {
          apiAccept({
            orderNumber: number
          })
            .then(res => {
              this.navShow = "2";
              this.query("1", this.navShow);
              this.$message({ message: "受理成功", type: "success" });
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(_ => {});
    },
    // 查询承运人已报价 信息
    oferAlert(unitload, orderNumber) {
      this.unitload = unitload;
      this.orderNumber = orderNumber;
      this.centerDialogVisible = true;
      apiSearchOffer({ orderNumber: this.orderNumber })
        .then(res => {
          // console.log(res);
          this.offerData = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 承运人 报价
    oferSubmit() {
      apiOffer({ ...this.offerData, ...{ orderNumber: this.orderNumber } })
        .then(res => {
          this.centerDialogVisible = false;
          // this.navShow = "3";
          this.query("1", this.navShow);
          this.$message({ message: "报价成功", type: "success" });
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 点击任意位置选中
    getTemplateRow(index, row) {
      console.log(row);
      this.radioData = row;
      this.radioIndex = row.id;
    },
    // 清空
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm.number = "";
      this.ruleForm.value = "";
      this.ruleForm.value2 = "";
      this.ruleForm.time = "";
      this.ruleForm.time2 = "";
    }
  }
};
</script>

<style lang="scss" scoped>
#order {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .navToggle {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    button {
      cursor: pointer;
      width: 181px;
      height: 48px;
      border-radius: 10px;
      &.active {
        background: $blue;
        color: #fff;
      }
    }
  }
  .tableDetail span {
    line-height: 35px;
  }
  .dialog .price {
    color: $red;
  }
  .iconimg {
    width: 18px;
  }
}
</style>
